<template>
	<view class="jf-locale" @click="handle()">
		<image :src="data.icon" class="jf-locale__icon"></image>
		<image src="@/static/images/locale/arrow.png" class="jf-locale__arrow" :class="{'active': data.show}"></image>
	</view>
	
	<view 
		class="jf-locale__fixed"
		@click="handleClose()"
		v-if="data.show">
		<view 
			class="jf-locale__list"
			:style="{
				'top': data.top,
				'left': data.left,
				'right': data.right
			}">
			<view class="jf-locale__item" v-for="(item,index) in data.list" :key="index" @click="handleChange(item.code)">
				<image :src="item.icon" class="jf-locale__item-icon"></image>
				<view class="jf-locale__item-name">{{$t(item.key)}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, onMounted } from "vue"
	import icon001 from "@/static/images/locale/icon001.png"
	import icon002 from "@/static/images/locale/icon002.png"
	import icon003 from "@/static/images/locale/icon003.png"
	import icon004 from "@/static/images/locale/icon004.png"
	
	const { proxy } = getCurrentInstance()
	
	const emits = defineEmits<{
		(e:"fatherMethod"):void
	}>()
	
	const data = reactive<{
		list: {
			icon: string
			code: string
			key: string
			name: string
		}[]
		show: boolean
		top: string
		left: string
		right: string
		isAndroid: boolean
		code: string
		icon: string
	}>({
		list: [
			{ icon: icon001, code: 'zh_Hans', key: 'locale.zh_Hans', name: "简体中文"},
			{ icon: icon001, code: 'zh_Hant', key: 'locale.zh_Hant', name: "繁體中文"},
			{ icon: icon002, code: 'en', key: 'locale.en', name: "English"},
			{ icon: icon003, code: 'ja', key: 'locale.ja', name: "日本語"},
			{ icon: icon004, code: 'kr', key: 'locale.kr', name: "한국어"}
		],
		show: false,
		top: "",
		left: "unset",
		right: "unset",
		isAndroid: false,
		code: uni.getLocale(),
		icon: ""
	})
	const systemInfo:UniApp.GetSystemInfoResult = uni.getSystemInfoSync();
	data.isAndroid = systemInfo.platform.toLowerCase() === 'android';
	const ratio:number = systemInfo.screenWidth / 750;

	const handle = ():void => {
		const query = uni.createSelectorQuery().in(proxy);
		query.select('.jf-locale').boundingClientRect((result:any):void => {
		  data.top = result.top + 50 * ratio + 'px'
		  if(result.left > 100){
			  data.right = systemInfo.screenWidth - result.right + 'px';
		  }else{
			  data.left = result.left + 'px'
		  }
		  data.show = true
		}).exec();
	}
	const handleChange = (code:string):void => {
		data.show = false;
		if (data.isAndroid) {
		  uni.showModal({
			content: proxy.$t('locale.confirm'),
			cancelText: proxy.$t('uni.showModal.cancel'), // 取消按钮的文字
			confirmText: proxy.$t('uni.showModal.confirm'), // 确认按钮的文字  
			success: (res) => {
			  if (res.confirm) {
				uni.setLocale(code)
				emits('fatherMethod')
			  }
			}
		  })
		} else {
		  uni.setLocale(code)
		  proxy.$i18n.locale = code
		  emits('fatherMethod')
		  plus.runtime.restart();
		}
		
	}
	const handleClose = ():void => {
		data.show = false
	}
	
	onMounted(() => {
		for(let i in data.list){
			if(data.list[i].code === uni.getLocale()){
				data.icon = data.list[i].icon
			}
		}
	})
</script>

<style lang="scss">
	.jf-locale{
		display: flex;
		flex-direction: row;
		align-items: center;
		.jf-locale__icon{
			width: 64rpx;
			height: 40rpx;
		}
		.jf-locale__arrow{
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
			&.active{
				transform: rotate(180deg);
			}
		}
	}
	.jf-locale__fixed{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 998;
		.jf-locale__list{
			position: absolute;
			background: #ffffff;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
			border-radius: 16rpx;
			padding: 10rpx 30rpx;
			.jf-locale__item{
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEFF3;
				.jf-locale__item-icon{
					width: 64rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				.jf-locale__item-name{
					font-size: 28rpx;
					color: #1F2937;
					font-weight: 500;
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
	}
</style>
